<template>

  <div class="main-body " :style="{'-webkit-overflow-scrolling': scrollMode}">
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
      <ul class="record" style="min-height:380px;" >
        <div v-if="islogin=='false'">
          <div style="padding: 150px 0 0;text-align: center">
            请先登录...
          </div>
        </div>
        <div v-if="!pageList">
          <div style="padding: 150px 0 0;text-align: center">
            暂未开放
          </div>
        </div>
        <li v-if="pageList" v-for="item in pageList">
          <div class="tetil"><div class="default">{{item.proName}}</div></div>
          <div class="content">兑换物品：移动话费</div>
          <div class="datetime">兑换时间：{{item.applyTimeStr}}</div>
          <div class="result">
            <span class="cost">
              <span>消耗金币：</span>
              <span class="goldbean">{{item.price}}</span>
            </span>
            <span class="profit"><span class="goldbean">{{item.stateStr}}</span></span>
          </div>
        </li>
      </ul>
    </mt-loadmore>
  </div>
</template>
<script>

  import { Loadmore,Toast ,MessageBox } from 'mint-ui';
  export default {
    data(){
      return{
        selected: '1',
        searchCondition: {  //分页属性
          pageNo:1,
          pageSize: 5
        },
        pageList: [],
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
        scrollMode: "auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
        islogin:sessionStorage.getItem('login')
      }
    },
    components: {

      'v-loadmore': Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
      // 推荐应用组件时用a-b形式起名
    },
    mounted() {
      this.loadPageList();  //初次访问查询列表
    },
    methods:{
      loadTop: function() { //组件提供的下拉触发方法
        //下拉加载
        this.loadPageList();
        this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      loadBottom: function() {
        // 上拉加载
        this.more();// 上拉触发的分页查询
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
      },
      loadPageList: function() {
        var _this=this;
        _this.searchCondition.pageNo=1;
        this.$http(this.API.ApplyList,{
          data:{page: _this.searchCondition.pageNo,length:_this.searchCondition.pageSize}
        }).then(function(res) {
           // console.log(res)
          _this.pageList=res.list;
          _this.isHaveMore(false);
          if(res.userInfo){
            const eva=eval("("+res.userInfo+")")
            _this.$store.state.moneys=eva.coin;
          }

          _this.$nextTick(function() {
            _this.scrollMode = "touch";
          });
        }).catch(function(err) {
          console.log(err);
        });
      },
      more: function() {
        // 分页查询
        var _this=this;
        _this.searchCondition.pageNo = parseInt(_this.searchCondition.pageNo) + 1;
        this.$http(this.API.ApplyList,{
          data:{page: _this.searchCondition.pageNo,length:_this.searchCondition.pageSize}
        }).then(function(res) {
          _this.pageList =_this.pageList.concat(res.list);
          Toast({
            message: res.list.length<1?'没有更多':'加载成功',
            position: 'bottom',
            duration: 2000
          });
          if(res.list.length<1){
            _this.isHaveMore(true);
          }
        }).catch(function(err) {
          console.log(err);
        });

      },
      isHaveMore: function(isHaveMore) {
        // 是否还有下一页，如果没有就禁止上拉刷新
        this.allLoaded = false; //true是禁止上拉加载
        if (isHaveMore) {
          this.allLoaded = true;
        }
      },
    },
    components: {

    }

  }
</script>
<style>

</style>

